{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>AI Peng资源分享网-用户注册</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
</head>
<body>
<!-- 导航条开始 -->
{% include 'common/_nav.html' %}
<!-- 导航条结束 -->

<!-- 布局 -->
<div class="container">
    <div class="row">
        <div style="margin-top: 60px;">
            <!-- 中间开始 -->
            <div class="col-md-12">
                <div class="jumbotron">
                    <h3>AI Peng资源网： 用户注册</h3>
                    <p>致力于分享技术文章，提供免费的技术视频，提供免费的IT电子书等优质资源</p>
                </div>
                <form style="margin-top: 10px;" method="post" action="/user/register/do/" id="registerForm">
                    {% csrf_token %}
                    <div class="form-group" id="usernameBox">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                        <p class="help-block hide" id="password1Help">该用户名已存在</p>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"
                               autocomplete="new-password">
                    </div>
                    <div class="form-group" id="password1Box">
                        <label for="password1">重复密码</label>
                        <input type="password" class="form-control" id="password1" name="password1" placeholder="请确认密码">
                        <p class="help-block hide" id="password1Help">两次密码不一致</p>
                    </div>
                    <button type="submit" class="btn btn-success">立即注册</button>
                </form>
            </div>
            <!-- 中间结束 -->
        </div>
    </div>
</div>
{#密码校验模态框开始#}
<div class="modal fade" tabindex="-1" role="dialog" id="passwordModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">友情提醒</h4>
            </div>
            <div class="modal-body">
                <p>两次密码不一致，请检查后重试</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>
{#密码校验模态框结束#}
{% include 'common/_footer.html' %}
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    // 解决ajax提交时csrf验证的问题
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
    });

    let usernameDom = $("#username")
    let passwordDom = $("#password")
    let password1Dom = $("#password1")
    usernameDom.blur(function () {
        {#console.log('失去焦点')#}
        // 获取用户名
        let username = usernameDom.val()

        // 发送ajax请求，获取该用户名是否已存在
        $.get("{% url 'user:has_username'%}", {
            username: username
        }, function (data) {
            // 存在
            if (data.is_exists) {
                $("#usernameBox").addClass('form-input-error')
                $("#usernameBox p.help-block").removeClass('hide')
            } else {
                $("#usernameBox").addClass('form-input-success')
            }
        })
        // 结果校验
    })

    $("#registerForm").submit(function (e) {
        // 阻止表单默认提交事件
        e.preventDefault()

        // 获取用户名，密码，确认密码
        let username = usernameDom.val()
        let password = $("#password").val()
        let password1 = $("#password1").val()
        // 校验用户名是否已存在
        // 校验密码相同
        let flag = isPasswordSame(password, password1)
        // 密码相同：提交
        if (flag) {
            $.post('{% url 'user:register_do' %}', {username, password}, function (data) {
                if (data.code === 10000) {
                    window.location.href = '/user/login'
                }else {
                    $("#usernameBox").addClass('form-input-error')
                    $("#usernameBox p.help-block").removeClass('hide')
                }
            })
        } else {
            // 密码不相同：弹出提示
            {#alert("两次密码不一致，请检查后重试")#}
            $('#passwordModal').modal({
                keyboard: false
            })
        }
    })

    // 校验两次密码是否一致
    function isPasswordSame(password1, password2) {
        if (!(password1 === password2)) {
            // 添加失败样式
            // 实现方式：给password1Box元素添加form-input-error样式
            $("#password1Box").addClass('form-input-error')
            $("#password1Box p.help-block").removeClass('hide')
            return false
        }
        // 如果校验通过：给当前输入框外层div添加form-input-success样式
        $("#password1Box").addClass('form-input-success')
        return true
    }
</script>
</body>
</html>